<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>古韵新境 - 完整原型（含积分系统）</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#E63946', // 大胆朱砂红
            secondary: '#1D3557', // 深蓝墨色
            accent: '#FFB703', // 金色点缀
            light: '#F1FAEE', // 米白底色
            dark: '#0D1B2A', // 深黑
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            display: ['"Playfair Display"', 'serif'],
            mono: ['"Noto Serif SC"', 'serif']
          },
          animation: {
            'ink-spread': 'inkSpread 2s ease-out forwards',
            'float': 'float 6s ease-in-out infinite',
            'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            'fade-in': 'fadeIn 0.5s ease-out forwards',
            'slide-up': 'slideUp 0.5s ease-out forwards',
            'scale-in': 'scaleIn 0.3s ease-out forwards',
            'scale-out': 'scaleOut 0.3s ease-in forwards',
          },
          keyframes: {
            inkSpread: {
              '0%': { transform: 'scale(0)', opacity: 0.8 },
              '100%': { transform: 'scale(1)', opacity: 0.2 },
            },
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' },
            },
            fadeIn: {
              '0%': { opacity: 0 },
              '100%': { opacity: 1 },
            },
            slideUp: {
              '0%': { transform: 'translateY(20px)', opacity: 0 },
              '100%': { transform: 'translateY(0)', opacity: 1 }
            },
            scaleIn: {
              '0%': { transform: 'scale(0)', opacity: 0 },
              '100%': { transform: 'scale(1)', opacity: 1 }
            },
            scaleOut: {
              '0%': { transform: 'scale(1)', opacity: 1 },
              '100%': { transform: 'scale(0)', opacity: 0 }
            }
          }
        }
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }
      .text-stroke {
        -webkit-text-stroke: 1px currentColor;
        color: transparent;
      }
      .clip-path-slant {
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
      }
      .backdrop-blur-xl {
        backdrop-filter: blur(24px);
      }
      .grid-masonry {
        grid-template-rows: masonry;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .progress-ring {
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
      }
      /* 页面容器样式 */
      .app-container {
        max-width: 375px;
        margin: 0 auto;
        height: 812px;
        position: relative;
        overflow: hidden;
        border: 10px solid #000;
        border-radius: 40px;
        box-shadow: 0 0 20px rgba(0,0,0,0.3);
      }
      .page {
        display: none;
        height: 100%;
        overflow-y: auto;
        background-color: white;
      }
      .page.active {
        display: block;
        animation: fadeIn 0.3s ease-out forwards;
      }
      /* 底部导航固定定位 */
      .bottom-nav {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
      }
      /* 加号菜单加号按钮菜单样式 */
      .plus-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 50;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }
      .plus-menu-overlay.active {
        opacity: 1;
        pointer-events: auto;
      }
      .plus-menu {
        position: absolute;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 60;
        display: flex;
        flex-direction: column;
        align-items: center;
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .plus-menu.active {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        pointer-events: auto;
      }
      .menu-item {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        color: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s ease;
      }
      .menu-item:hover {
        transform: translateY(-4px);
      }
      .menu-item span {
        font-size: 10px;
        margin-top: 4px;
        opacity: 0;
        transform: translateY(8px);
        transition: all 0.2s ease 0.1s;
      }
      .plus-menu.active .menu-item span {
        opacity: 1;
        transform: translateY(0);
      }
      .menu-item:nth-child(1) { animation: menuItemIn 0.2s ease 0.1s forwards; opacity: 0; }
      .menu-item:nth-child(2) { animation: menuItemIn 0.2s ease 0.2s forwards; opacity: 0; }
      .menu-item:nth-child(3) { animation: menuItemIn 0.2s ease 0.3s forwards; opacity: 0; }
      .menu-item:nth-child(4) { animation: menuItemIn 0.2s ease 0.4s forwards; opacity: 0; }
      
      @keyframes menuItemIn {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
    }
  </style>
  
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Noto+Serif+SC:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen py-8 px-4">
  <div class="text-center mb-8">
    <h1 class="text-2xl font-bold text-secondary">古韵新境 - 完整原型</h1>
    <p class="text-gray-600 mt-2">包含积分系统的文化小程序原型</p>
  </div>
  
  <!-- 手机模拟器容器 -->
  <div class="app-container mx-auto">
    <!-- 1. 首页原型 - 前卫设计版 -->
    <div id="home-page" class="page active">
      <!-- 小程序状态栏 -->
      <div class="bg-dark text-white px-4 py-2 flex justify-between items-center text-xs">
        <span>10:23</span>
        <div class="flex space-x-2">
          <i class="fa fa-signal"></i>
          <i class="fa fa-wifi"></i>
          <i class="fa fa-battery-full"></i>
        </div>
      </div>
      
      <!-- 创新导航栏 -->
      <div class="bg-transparent px-5 py-4 relative">
        <div class="absolute inset-0 bg-gradient-to-r from-primary/10 to-secondary/10 -z-10 rounded-b-3xl"></div>
        <div class="flex justify-between items-center">
          <div class="flex items-center">
            <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold text-xl">
              韵
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <button class="w-8 h-8 rounded-full bg-white/80 flex items-center justify-center shadow-sm">
              <i class="fa fa-search text-secondary"></i>
            </button>
            <button class="w-8 h-8 rounded-full bg-white/80 flex items-center justify-center shadow-sm">
              <i class="fa fa-bell text-secondary"></i>
            </button>
            <div class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-white font-medium page-nav" data-target="personal-center">
              用
            </div>
          </div>
        </div>
      </div>
      
      <!-- 动态文化轮播 -->
      <div class="relative h-48 px-5 mb-4 overflow-hidden rounded-xl">
        <div class="absolute inset-0 bg-gradient-to-r from-secondary to-primary opacity-90 rounded-xl"></div>
        <div class="absolute inset-0 flex flex-col justify-center p-6 z-10">
          <span class="text-accent text-sm font-medium mb-1">每日精选 · 诗词</span>
          <h3 class="text-white text-2xl font-display font-bold mb-2 leading-tight">
            飞流直下三千尺
          </h3>
          <p class="text-white/80 text-sm">唐·李白《望庐山瀑布》</p>
        </div>
        <div class="absolute -right-10 -bottom-10 w-40 h-40 rounded-full bg-accent/20 blur-3xl"></div>
        
        <!-- 滑动指示器 -->
        <div class="absolute bottom-4 right-4 flex space-x-1">
          <div class="w-2 h-2 rounded-full bg-white"></div>
          <div class="w-2 h-2 rounded-full bg-white/40"></div>
          <div class="w-2 h-2 rounded-full bg-white/40"></div>
        </div>
      </div>
      
      <!-- 多元文化入口 - 创新网格 -->
      <div class="px-5 mb-6">
        <h4 class="text-secondary font-medium mb-4">探索文化维度</h4>
        <div class="grid grid-cols-2 gap-3">
          <!-- 诗词入口 -->
          <button class="group bg-gradient-to-br from-primary/5 to-primary/10 p-4 rounded-xl flex flex-col items-start transition-all duration-300 hover:from-primary/10 hover:to-primary/20 page-nav" data-target="explore-page">
            <div class="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center text-primary mb-2 group-hover:bg-primary group-hover:text-white transition-all">
              <i class="fa fa-book"></i>
            </div>
            <span class="font-medium">诗词</span>
            <span class="text-xs text-secondary/60 mt-1">2,500+ 首</span>
          </button>
          
          <!-- 成语入口 -->
          <button class="group bg-gradient-to-br from-secondary/5 to-secondary/10 p-4 rounded-xl flex flex-col items-start transition-all duration-300 hover:from-secondary/10 hover:to-secondary/20 page-nav" data-target="explore-page">
            <div class="w-10 h-10 rounded-lg bg-secondary/20 flex items-center justify-center text-secondary mb-2 group-hover:bg-secondary group-hover:text-white transition-all">
              <i class="fa fa-comment"></i>
            </div>
            <span class="font-medium">成语</span>
            <span class="text-xs text-secondary/60 mt-1">1,800+ 条</span>
          </button>
          
          <!-- 古籍入口 -->
          <button class="group bg-gradient-to-br from-accent/5 to-accent/10 p-4 rounded-xl flex flex-col items-start transition-all duration-300 hover:from-accent/10 hover:to-accent/20 page-nav" data-target="explore-page">
            <div class="w-10 h-10 rounded-lg bg-accent/20 flex items-center justify-center text-accent mb-2 group-hover:bg-accent group-hover:text-white transition-all">
              <i class="fa fa-scroll"></i>
            </div>
            <span class="font-medium">古籍</span>
            <span class="text-xs text-secondary/60 mt-1">80+ 部</span>
          </button>
          
          <!-- AR体验入口 -->
          <button class="group bg-gradient-to-br from-dark/5 to-dark/10 p-4 rounded-xl flex flex-col items-start transition-all duration-300 hover:from-dark/10 hover:to-dark/20 page-nav" data-target="ar-page">
            <div class="w-10 h-10 rounded-lg bg-dark/20 flex items-center justify-center text-dark mb-2 group-hover:bg-dark group-hover:text-white transition-all">
              <i class="fa fa-cube"></i>
            </div>
            <span class="font-medium">AR体验</span>
            <span class="text-xs text-secondary/60 mt-1">24 场景</span>
          </button>
        </div>
      </div>
      
      <!-- 趋势探索区 -->
      <div class="px-5 mb-6">
        <div class="flex justify-between items-center mb-4">
          <h4 class="text-secondary font-medium">趋势探索</h4>
          <button class="text-primary text-sm">查看全部</button>
        </div>
        
        <div class="flex space-x-3 overflow-x-auto pb-2 scrollbar-hide">
          <!-- 趋势卡片1 -->
          <div class="bg-white border border-gray-100 rounded-xl p-3 min-w-[160px] shadow-sm hover:shadow-md transition-shadow page-nav" data-target="detail-page">
            <div class="w-full h-24 bg-primary/10 rounded-lg mb-3 overflow-hidden relative">
              <span class="absolute inset-0 flex items-center justify-center text-primary/30 text-4xl">
                <i class="fa fa-fire"></i>
              </span>
            </div>
            <h5 class="font-medium text-sm">春季相关成语</h5>
            <div class="flex items-center mt-1">
              <span class="text-xs bg-accent/10 text-accent px-2 py-0.5 rounded-full">热门</span>
            </div>
          </div>
          
          <!-- 趋势卡片2 -->
          <div class="bg-white border border-gray-100 rounded-xl p-3 min-w-[160px] shadow-sm hover:shadow-md transition-shadow page-nav" data-target="detail-page">
            <div class="w-full h-24 bg-secondary/10 rounded-lg mb-3 overflow-hidden relative">
              <span class="absolute inset-0 flex items-center justify-center text-secondary/30 text-4xl">
                <i class="fa fa-book"></i>
              </span>
            </div>
            <h5 class="font-medium text-sm">《论语》新解</h5>
            <div class="flex items-center mt-1">
              <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">更新</span>
            </div>
          </div>
          
          <!-- 趋势卡片3 -->
          <div class="bg-white border border-gray-100 rounded-xl p-3 min-w-[160px] shadow-sm hover:shadow-md transition-shadow page-nav" data-target="detail-page">
            <div class="w-full h-24 bg-accent/10 rounded-lg mb-3 overflow-hidden relative">
              <span class="absolute inset-0 flex items-center justify-center text-accent/30 text-4xl">
                <i class="fa fa-gamepad"></i>
              </span>
            </div>
            <h5 class="font-medium text-sm">成语接龙挑战</h5>
            <div class="flex items-center mt-1">
              <span class="text-xs bg-secondary/10 text-secondary px-2 py-0.5 rounded-full">活动</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 创新底部导航 -->
      <div class="border-t border-gray-100 bg-white px-2 py-3 bottom-nav">
        <div class="flex justify-around">
          <button class="flex flex-col items-center text-primary page-nav" data-target="home-page">
            <i class="fa fa-compass text-xl"></i>
            <span class="text-xs mt-1">探索</span>
          </button>
          <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="explore-page">
            <i class="fa fa-lightbulb-o text-xl"></i>
            <span class="text-xs mt-1">灵感</span>
          </button>
          <button id="plus-button" class="w-14 h-14 -mt-8 bg-primary rounded-full flex items-center justify-center text-white shadow-lg transition-transform duration-300">
            <i class="fa fa-plus text-xl"></i>
          </button>
          <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="community-page">
            <i class="fa fa-users text-xl"></i>
            <span class="text-xs mt-1">社区</span>
          </button>
          <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="personal-center">
            <i class="fa fa-user text-xl"></i>
            <span class="text-xs mt-1">我的</span>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 2. 内容探索页 - 多元文化展示 -->
    <div id="explore-page" class="page">
      <!-- 小程序状态栏 -->
      <div class="bg-dark text-white px-4 py-2 flex justify-between items-center text-xs">
        <span>10:25</span>
        <div class="flex space-x-2">
          <i class="fa fa-signal"></i>
          <i class="fa fa-wifi"></i>
          <i class="fa fa-battery-full"></i>
        </div>
      </div>
      
      <!-- 导航栏 -->
      <div class="bg-white px-5 py-4 flex justify-between items-center border-b border-gray-100">
        <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center page-nav" data-target="home-page">
          <i class="fa fa-arrow-left text-secondary"></i>
        </button>
        <h2 class="font-medium text-lg">文化探索</h2>
        <div class="w-10 h-10"></div> <!-- 占位 -->
      </div>
      
      <!-- 创新搜索栏 -->
      <div class="px-5 py-4">
        <div class="relative">
          <input type="text" placeholder="搜索诗词、成语、古籍..." class="w-full py-3 px-5 pl-12 bg-gray-50 rounded-xl border border-gray-100 focus:outline-none focus:border-primary transition-all">
          <i class="fa fa-search absolute left-5 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          <div class="absolute right-4 top-1/2 transform -translate-y-1/2 flex space-x-2">
            <button class="w-7 h-7 rounded-full bg-white/80 flex items-center justify-center shadow-sm">
              <i class="fa fa-microphone text-secondary text-sm"></i>
            </button>
            <button class="w-7 h-7 rounded-full bg-white/80 flex items-center justify-center shadow-sm">
              <i class="fa fa-camera text-secondary text-sm"></i>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 内容类型切换器 -->
      <div class="px-5 mb-4">
        <div class="flex space-x-2">
          <button class="flex-1 py-3 rounded-xl bg-primary text-white font-medium">全部</button>
          <button class="flex-1 py-3 rounded-xl bg-gray-50 text-secondary font-medium">诗词</button>
          <button class="flex-1 py-3 rounded-xl bg-gray-50 text-secondary font-medium">成语</button>
          <button class="flex-1 py-3 rounded-xl bg-gray-50 text-secondary font-medium">古籍</button>
        </div>
      </div>
      
      <!-- 高级筛选器 -->
      <div class="px-5 mb-6">
        <div class="flex flex-wrap gap-2">
          <button class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
            <span>朝代</span>
            <i class="fa fa-chevron-down ml-1 text-xs"></i>
          </button>
          <button class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
            <span>主题</span>
            <i class="fa fa-chevron-down ml-1 text-xs"></i>
          </button>
          <button class="px-3 py-1 bg-gray-100 rounded-full text-sm flex items-center">
            <span>难度</span>
            <i class="fa fa-chevron-down ml-1 text-xs"></i>
          </button>
          <button class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">
            最近更新
          </button>
          <button class="px-3 py-1 bg-secondary/10 text-secondary rounded-full text-sm">
            收藏最多
          </button>
        </div>
      </div>
      
      <!-- 混合内容展示区 -->
      <div class="px-5 space-y-4 pb-24 scrollbar-hide pr-2">
        <!-- 诗词卡片 -->
        <div class="bg-white border border-gray-100 rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow page-nav" data-target="detail-page">
          <div class="flex items-start">
            <div class="w-14 h-14 bg-primary/10 rounded-lg flex-shrink-0 flex items-center justify-center text-primary">
              <i class="fa fa-book text-xl"></i>
            </div>
            <div class="ml-3 flex-1">
              <div class="flex items-center">
                <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">诗词</span>
                <span class="text-xs text-gray-500 ml-2">唐·李白</span>
              </div>
              <h3 class="font-display font-medium mt-2">将进酒</h3>
              <p class="text-sm text-gray-600 mt-1 line-clamp-2">
                君不见黄河之水天上来，奔流到海不复回。
                君不见高堂明镜悲白发，朝如青丝暮成雪。
              </p>
              <div class="flex justify-between items-center mt-3">
                <div class="flex items-center space-x-3">
                  <button class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-heart-o"></i>
                  </button>
                  <button class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-bookmark-o"></i>
                  </button>
                </div>
                <button class="text-primary text-sm">查看详情</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 成语卡片 -->
        <div class="bg-white border border-gray-100 rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow page-nav" data-target="detail-page">
          <div class="flex items-start">
            <div class="w-14 h-14 bg-secondary/10 rounded-lg flex-shrink-0 flex items-center justify-center text-secondary">
              <i class="fa fa-comment text-xl"></i>
            </div>
            <div class="ml-3 flex-1">
              <div class="flex items-center">
                <span class="text-xs bg-secondary/10 text-secondary px-2 py-0.5 rounded-full">成语</span>
                <span class="text-xs text-gray-500 ml-2">出处: 《史记》</span>
              </div>
              <h3 class="font-display font-medium mt-2">破釜沉舟</h3>
              <p class="text-sm text-gray-600 mt-1 line-clamp-2">
                比喻下决心不顾一切地干到底。
                项羽乃悉引兵渡河，皆沉船，破釜甑，烧庐舍，持三日粮，以示士卒必死，无一还心。
              </p>
              <div class="flex justify-between items-center mt-3">
                <div class="flex items-center space-x-3">
                  <button class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-heart-o"></i>
                  </button>
                  <button class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-bookmark-o"></i>
                  </button>
                </div>
                <button class="text-primary text-sm">查看详情</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 古籍卡片 -->
        <div class="bg-white border border-gray-100 rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow page-nav" data-target="detail-page">
          <div class="flex items-start">
            <div class="w-14 h-14 bg-accent/10 rounded-lg flex-shrink-0 flex items-center justify-center text-accent">
              <i class="fa fa-scroll text-xl"></i>
            </div>
            <div class="ml-3 flex-1">
              <div class="flex items-center">
                <span class="text-xs bg-accent/10 text-accent px-2 py-0.5 rounded-full">古籍</span>
                <span class="text-xs text-gray-500 ml-2">春秋·孔子及其弟子</span>
              </div>
              <h3 class="font-display font-medium mt-2">论语 · 学而篇</h3>
              <p class="text-sm text-gray-600 mt-1 line-clamp-2">
                子曰："学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？"
              </p>
              <div class="flex justify-between items-center mt-3">
                <div class="flex items-center space-x-3">
                  <button class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-heart-o"></i>
                  </button>
                  <button class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-bookmark-o"></i>
                  </button>
                </div>
                <button class="text-primary text-sm">查看详情</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- AI功能卡片 - 新增 -->
        <div class="bg-white border border-gray-100 rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow page-nav" data-target="ai-poetry-page">
          <div class="flex items-start">
            <div class="w-14 h-14 bg-dark/10 rounded-lg flex-shrink-0 flex items-center justify-center text-dark">
              <i class="fa fa-magic text-xl"></i>
            </div>
            <div class="ml-3 flex-1">
              <div class="flex items-center">
                <span class="text-xs bg-dark/10 text-dark px-2 py-0.5 rounded-full">AI功能</span>
                <span class="text-xs text-gray-500 ml-2">智能创作</span>
              </div>
              <h3 class="font-display font-medium mt-2">AI诗词生成</h3>
              <p class="text-sm text-gray-600 mt-1 line-clamp-2">
                输入主题与风格，AI为您创作符合格律的古典诗词，体验传统文化与现代科技的碰撞。
              </p>
              <div class="flex justify-between items-center mt-3">
                <div class="flex items-center space-x-3">
                  <span class="text-xs text-accent flex items-center">
                    <i class="fa fa-diamond mr-1"></i> 30积分/次
                  </span>
                </div>
                <button class="text-primary text-sm">立即使用</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 底部导航 -->
      <div class="border-t border-gray-100 bg-white px-2 py-3 bottom-nav">
        <div class="flex justify-around">
          <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="home-page">
            <i class="fa fa-compass text-xl"></i>
            <span class="text-xs mt-1">探索</span>
          </button>
          <button class="flex flex-col items-center text-primary page-nav" data-target="explore-page">
            <i class="fa fa-lightbulb-o text-xl"></i>
            <span class="text-xs mt-1">灵感</span>
          </button>
          <button id="plus-button-2" class="w-14 h-14 -mt-8 bg-primary rounded-full flex items-center justify-center text-white shadow-lg transition-transform duration-300">
            <i class="fa fa-plus text-xl"></i>
          </button>
          <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="community-page">
            <i class="fa fa-users text-xl"></i>
            <span class="text-xs mt-1">社区</span>
          </button>
          <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="personal-center">
            <i class="fa fa-user text-xl"></i>
            <span class="text-xs mt-1">我的</span>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 3. 沉浸式详情页 - 创新展示 -->
    <div id="detail-page" class="page">
      <!-- 小程序状态栏 -->
      <div class="bg-dark text-white px-4 py-2 flex justify-between items-center text-xs">
        <span>10:30</span>
        <div class="flex space-x-2">
          <i class="fa fa-signal"></i>
          <i class="fa fa-wifi"></i>
          <i class="fa fa-battery-full"></i>
        </div>
      </div>
      
      <!-- 透明导航栏 -->
      <div class="absolute top-6 left-0 right-0 px-5 z-10 flex justify-between items-center">
        <button class="w-10 h-10 rounded-full bg-black/30 backdrop-blur-xl flex items-center justify-center text-white page-nav" data-target="explore-page">
          <i class="fa fa-arrow-left"></i>
        </button>
        <div class="flex space-x-2">
          <button class="w-10 h-10 rounded-full bg-black/30 backdrop-blur-xl flex items-center justify-center text-white">
            <i class="fa fa-share-alt"></i>
          </button>
          <button class="w-10 h-10 rounded-full bg-black/30 backdrop-blur-xl flex items-center justify-center text-white">
            <i class="fa fa-bookmark-o"></i>
          </button>
        </div>
      </div>
      
      <!-- 沉浸式头部 -->
      <div class="h-48 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-r from-secondary to-primary"></div>
        <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22 viewBox=%220 0 100 100%22%3E%3Crect width=%22100%22 height=%22100%22 fill=%22transparent%22/%3E%3Cpath d=%22M0,20 Q25,0 50,20 T100,20 V80 Q75,100 50,80 T0,80 Z%22 fill=%22white%22 opacity=%220.1%22/%3E%3C/svg%3E')] bg-cover bg-center"></div>
        
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
          <div class="flex items-center">
            <span class="bg-accent text-dark text-xs px-2 py-1 rounded-md font-medium">成语</span>
            <span class="ml-2 text-sm opacity-90">文化等级: 进阶</span>
          </div>
          <h1 class="text-3xl font-display font-bold mt-2">掩耳盗铃</h1>
          <p class="text-sm opacity-90 mt-1">出自《吕氏春秋·自知》</p>
        </div>
      </div>
      
      <!-- 内容交互区 -->
      <div class="px-5 py-6 pb-24">
        <!-- 发音与核心解释 -->
        <div class="flex justify-between items-center mb-6">
          <div>
            <h3 class="text-gray-500 text-sm">发音</h3>
            <p class="font-medium mt-1">yǎn ěr dào líng</p>
          </div>
          <button class="w-12 h-12 rounded-full bg-primary/10 text-primary flex items-center justify-center">
            <i class="fa fa-volume-up text-xl"></i>
          </button>
        </div>
        
        <!-- 动态释义区 -->
        <div class="mb-8">
          <h3 class="font-medium text-lg mb-3 flex items-center">
            <span class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-sm mr-2">
              释
            </span>
            释义
          </h3>
          <div class="bg-gray-50 rounded-xl p-4 border border-gray-100">
            <p class="mb-3">掩住自己的耳朵去偷铃铛。比喻自己欺骗自己，明明掩盖不住的事情偏要想法子掩盖。</p>
            
            <div class="flex items-start mt-4">
              <div class="w-2 h-2 rounded-full bg-primary mt-2 flex-shrink-0"></div>
              <p class="ml-3 text-sm text-gray-600">
                原作"掩耳盗钟"，后来多作"掩耳盗铃"，比喻自欺欺人。
              </p>
            </div>
          </div>
        </div>
        
        <!-- 来源故事 - 交互式 -->
        <div class="mb-8">
          <h3 class="font-medium text-lg mb-3 flex items-center">
            <span class="w-6 h-6 rounded-full bg-secondary/10 text-secondary flex items-center justify-center text-sm mr-2">
              源
            </span>
            来源故事
          </h3>
          <div class="bg-white border border-gray-100 rounded-xl overflow-hidden shadow-sm">
            <div class="p-4">
              <p class="text-sm leading-relaxed">
                范氏之亡也，百姓有得钟者。欲负而走，则钟大不可负。以椎毁之，钟况然有音。恐人闻之而夺己也，遽掩其耳。
              </p>
              <button class="mt-3 text-primary text-sm flex items-center">
                <span>查看白话译文</span>
                <i class="fa fa-chevron-down ml-1 text-xs"></i>
              </button>
            </div>
            <div class="h-32 bg-gray-100 relative overflow-hidden">
              <div class="absolute inset-0 flex items-center justify-center">
                <button class="w-14 h-14 rounded-full bg-white/80 flex items-center justify-center shadow-lg">
                  <i class="fa fa-play text-primary"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 用法示例 -->
        <div>
          <h3 class="font-medium text-lg mb-3 flex items-center">
            <span class="w-6 h-6 rounded-full bg-accent/10 text-accent flex items-center justify-center text-sm mr-2">
              用
            </span>
            用法示例
          </h3>
          <div class="space-y-3">
            <div class="bg-white border border-gray-100 rounded-xl p-3 shadow-sm">
              <p class="italic text-gray-700">"你这种说法简直是掩耳盗铃，事实已经很清楚了，何必再掩饰？"</p>
            </div>
            <div class="bg-white border border-gray-100 rounded-xl p-3 shadow-sm">
              <p class="italic text-gray-700">"那些以为只要不承认，问题就不存在的人，不过是在掩耳盗铃罢了。"</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 互动操作栏 -->
      <div class="border-t border-gray-100 bg-white px-5 py-4 bottom-nav">
        <div class="flex justify-between items-center">
          <div class="flex space-x-4">
            <button class="flex flex-col items-center">
              <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-secondary mb-1">
                <i class="fa fa-heart-o"></i>
              </div>
              <span class="text-xs">喜欢</span>
            </button>
            <button class="flex flex-col items-center">
              <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-secondary mb-1">
                <i class="fa fa-bookmark-o"></i>
              </div>
              <span class="text-xs">收藏</span>
            </button>
            <button class="flex flex-col items-center">
              <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-secondary mb-1">
                <i class="fa fa-exchange"></i>
              </div>
              <span class="text-xs">分享</span>
            </button>
          </div>
          <button class="bg-primary text-white px-6 py-2 rounded-xl font-medium flex items-center">
            <span>加入学习计划</span>
            <i class="fa fa-arrow-right ml-2"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 4. AR互动体验页 -->
    <div id="ar-page" class="page">
      <!-- 小程序状态栏 -->
      <div class="bg-dark text-white px-4 py-2 flex justify-between items-center text-xs">
        <span>10:35</span>
        <div class="flex space-x-2">
          <i class="fa fa-signal"></i>
          <i class="fa fa-wifi"></i>
          <i class="fa fa-battery-full"></i>
        </div>
      </div>
      
      <!-- AR视图区 -->
      <div class="relative h-full">
        <!-- 相机视图模拟 -->
        <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22 viewBox=%220 0 100 100%22%3E%3Crect width=%22100%22 height=%22100%22 fill=%22%23222%22/%3E%3Ccircle cx=%2230%22 cy=%2230%22 r=%2210%22 fill=%22%23444%22/%3E%3Ccircle cx=%2270%22 cy=%2260%22 r=%2215%22 fill=%22%23444%22/%3E%3Cpath d=%22M10,70 Q50,90 90,70%22 stroke=%22%23555%22 fill=%22none%22 stroke-width=%222%22/%3E%3C/svg%3E')] bg-cover bg-center opacity-70"></div>
        
        <!-- AR叠加内容 - 动态诗句 -->
        <div class="absolute top-1/3 left-1/2 transform -translate-x-1/2 w-full text-center">
          <div class="text-white font-display text-2xl md:text-3xl drop-shadow-lg animate-float">
            明月松间照
          </div>
          <div class="text-white/80 font-display text-xl md:text-2xl drop-shadow-lg mt-2 animate-float" style="animation-delay: 0.5s">
            清泉石上流
          </div>
        </div>
        
        <!-- AR识别标记 -->
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 border-2 border-white/30 rounded-full flex items-center justify-center">
          <div class="w-24 h-24 border-2 border-primary/50 rounded-full"></div>
          <div class="absolute w-full h-1 bg-primary/70 top-1/2 left-0"></div>
          <div class="absolute w-1 h-full bg-primary/70 top-0 left-1/2"></div>
        </div>
        
        <!-- 顶部控制栏 -->
        <div class="absolute top-0 left-0 right-0 p-4 flex justify-between items-center">
          <button class="w-10 h-10 rounded-full bg-black/40 backdrop-blur-xl flex items-center justify-center text-white page-nav" data-target="home-page">
            <i class="fa fa-arrow-left"></i>
          </button>
          <h2 class="text-white font-medium">AR文化探索</h2>
          <div class="flex space-x-2">
            <button class="w-10 h-10 rounded-full bg-black/40 backdrop-blur-xl flex items-center justify-center text-white">
              <i class="fa fa-info"></i>
            </button>
            <button class="w-10 h-10 rounded-full bg-black/40 backdrop-blur-xl flex items-center justify-center text-white">
              <i class="fa fa-cog"></i>
            </button>
          </div>
        </div>
        
        <!-- 底部工具栏 -->
        <div class="absolute bottom-16 left-0 right-0 p-6">
          <div class="flex justify-between items-center">
            <!-- 左侧功能 -->
            <div class="flex space-x-3">
              <button class="w-12 h-12 rounded-full bg-black/40 backdrop-blur-xl flex items-center justify-center text-white">
                <i class="fa fa-lightbulb-o"></i>
              </button>
              <button class="w-12 h-12 rounded-full bg-black/40 backdrop-blur-xl flex items-center justify-center text-white">
                <i class="fa fa-image"></i>
              </button>
            </div>
            
            <!-- 中央拍摄按钮 -->
            <button class="w-16 h-16 rounded-full bg-white flex items-center justify-center border-4 border-black/30">
              <div class="w-12 h-12 rounded-full bg-primary"></div>
            </button>
            
            <!-- 右侧功能 -->
            <div class="flex space-x-3">
              <button class="w-12 h-12 rounded-full bg-black/40 backdrop-blur-xl flex items-center justify-center text-white">
                <i class="fa fa-refresh"></i>
              </button>
              <button class="w-12 h-12 rounded-full bg-black/40 backdrop-blur-xl flex items-center justify-center text-white">
                <i class="fa fa-picture-o"></i>
              </button>
            </div>
          </div>
          
          <!-- 识别结果卡片 -->
          <div class="mt-6 bg-white/90 backdrop-blur-xl rounded-xl p-4 shadow-lg">
            <div class="flex justify-between items-start">
              <div>
                <span class="bg-primary/10 text-primary text-xs px-2 py-0.5 rounded-full">唐诗</span>
                <h3 class="font-display font-medium mt-2">山居秋暝</h3>
                <p class="text-sm text-gray-600">唐·王维</p>
              </div>
              <button class="bg-primary text-white px-3 py-1 rounded-lg text-sm page-nav" data-target="detail-page">
                详情
              </button>
            </div>
          </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="border-t border-gray-100 bg-white px-2 py-3 bottom-nav">
          <div class="flex justify-around">
            <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="home-page">
              <i class="fa fa-compass text-xl"></i>
              <span class="text-xs mt-1">探索</span>
            </button>
            <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="explore-page">
              <i class="fa fa-lightbulb-o text-xl"></i>
              <span class="text-xs mt-1">灵感</span>
            </button>
            <button id="plus-button-3" class="w-14 h-14 -mt-8 bg-primary rounded-full flex items-center justify-center text-white shadow-lg transition-transform duration-300">
              <i class="fa fa-plus text-xl"></i>
            </button>
            <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="community-page">
              <i class="fa fa-users text-xl"></i>
              <span class="text-xs mt-1">社区</span>
            </button>
            <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="personal-center">
              <i class="fa fa-user text-xl"></i>
              <span class="text-xs mt-1">我的</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 5. 个人中心页面 -->
  <div id="personal-center" class="page">
    <!-- 小程序状态栏 -->
    <div class="bg-dark text-white px-4 py-2 flex justify-between items-center text-xs">
      <span>10:40</span>
      <div class="flex space-x-2">
        <i class="fa fa-signal"></i>
        <i class="fa fa-wifi"></i>
        <i class="fa fa-battery-full"></i>
      </div>
    </div>
    
    <!-- 个人信息头部 -->
    <div class="bg-gradient-to-r from-secondary to-primary py-10 px-5 text-white">
      <div class="flex items-center">
        <div class="w-16 h-16 rounded-full bg-white/20 backdrop-blur-xl flex items-center justify-center text-2xl font-bold">
          用
        </div>
        <div class="ml-4">
          <h3 class="font-medium">文化探索者</h3>
          <p class="text-sm opacity-90 mt-1">等级：秀才 Lv.3</p>
        </div>
        <button class="ml-auto bg-white/20 backdrop-blur-xl px-3 py-1 rounded-full text-sm">
          编辑资料
        </button>
      </div>
      
      <!-- 积分与成就 -->
      <div class="flex justify-around mt-8">
        <div class="text-center">
          <p class="text-2xl font-bold">258</p>
          <p class="text-xs opacity-90 mt-1">文化积分</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold">12</p>
          <p class="text-xs opacity-90 mt-1">已解锁成就</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold">36</p>
          <p class="text-xs opacity-90 mt-1">学习天数</p>
        </div>
      </div>
    </div>
    
    <!-- 功能菜单 -->
    <div class="px-5 py-4">
      <div class="grid grid-cols-2 gap-4 mb-6">
        <button class="bg-white border border-gray-100 rounded-xl p-4 flex items-center shadow-sm">
          <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
            <i class="fa fa-trophy"></i>
          </div>
          <div class="ml-3">
            <h4 class="font-medium">我的成就</h4>
            <p class="text-xs text-gray-500">查看已获得徽章</p>
          </div>
        </button>
        <button class="bg-white border border-gray-100 rounded-xl p-4 flex items-center shadow-sm">
          <div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
            <i class="fa fa-bookmark"></i>
          </div>
          <div class="ml-3">
            <h4 class="font-medium">我的收藏</h4>
            <p class="text-xs text-gray-500">已收藏18项内容</p>
          </div>
        </button>
      </div>
      
      <!-- 积分中心 -->
      <div class="bg-white border border-gray-100 rounded-xl p-4 mb-6 shadow-sm">
        <h4 class="font-medium mb-4 flex items-center">
          <i class="fa fa-diamond text-accent mr-2"></i>
          积分中心
        </h4>
        <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
          <div>
            <p class="text-sm text-gray-500">当前可兑换积分</p>
            <p class="text-xl font-bold text-accent mt-1">258</p>
          </div>
          <button class="bg-accent text-white px-4 py-2 rounded-lg text-sm font-medium">
            去兑换
          </button>
        </div>
        <div class="mt-4 grid grid-cols-3 gap-2">
          <button class="text-center text-xs p-2 border border-gray-100 rounded-lg">
            <i class="fa fa-gift text-accent block mx-auto mb-1"></i>
            积分任务
          </button>
          <button class="text-center text-xs p-2 border border-gray-100 rounded-lg">
            <i class="fa fa-exchange text-accent block mx-auto mb-1"></i>
            积分兑换
          </button>
          <button class="text-center text-xs p-2 border border-gray-100 rounded-lg">
            <i class="fa fa-history text-accent block mx-auto mb-1"></i>
            积分记录
          </button>
        </div>
      </div>
      
      <!-- 系统设置 -->
      <div class="space-y-2">
        <button class="w-full bg-white border border-gray-100 rounded-xl p-4 flex justify-between items-center shadow-sm">
          <div class="flex items-center">
            <div class="w-10 h-10 rounded-lg bg-dark/10 flex items-center justify-center text-dark">
              <i class="fa fa-cog"></i>
            </div>
            <span class="ml-3 font-medium">系统设置</span>
          </div>
          <i class="fa fa-chevron-right text-gray-400"></i>
        </button>
        <button class="w-full bg-white border border-gray-100 rounded-xl p-4 flex justify-between items-center shadow-sm">
          <div class="flex items-center">
            <div class="w-10 h-10 rounded-lg bg-dark/10 flex items-center justify-center text-dark">
              <i class="fa fa-question-circle"></i>
            </div>
            <span class="ml-3 font-medium">帮助与反馈</span>
          </div>
          <i class="fa fa-chevron-right text-gray-400"></i>
        </button>
      </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="border-t border-gray-100 bg-white px-2 py-3 bottom-nav">
      <div class="flex justify-around">
        <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="home-page">
          <i class="fa fa-compass text-xl"></i>
          <span class="text-xs mt-1">探索</span>
        </button>
        <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="explore-page">
          <i class="fa fa-lightbulb-o text-xl"></i>
          <span class="text-xs mt-1">灵感</span>
        </button>
        <button id="plus-button-3" class="w-14 h-14 -mt-8 bg-primary rounded-full flex items-center justify-center text-white shadow-lg transition-transform duration-300">
          <i class="fa fa-plus text-xl"></i>
        </button>
        <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="community-page">
          <i class="fa fa-users text-xl"></i>
          <span class="text-xs mt-1">社区</span>
        </button>
        <button class="flex flex-col items-center text-primary page-nav" data-target="personal-center">
          <i class="fa fa-user text-xl"></i>
          <span class="text-xs mt-1">我的</span>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 6. 社区页面 -->
  <div id="community-page" class="page">
    <!-- 小程序状态栏 -->
    <div class="bg-dark text-white px-4 py-2 flex justify-between items-center text-xs">
      <span>10:45</span>
      <div class="flex space-x-2">
        <i class="fa fa-signal"></i>
        <i class="fa fa-wifi"></i>
        <i class="fa fa-battery-full"></i>
      </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="bg-white px-5 py-4 flex justify-between items-center border-b border-gray-100">
      <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center page-nav" data-target="home-page">
        <i class="fa fa-arrow-left text-secondary"></i>
      </button>
      <h2 class="font-medium text-lg">文化社区</h2>
      <button class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
        <i class="fa fa-pencil"></i>
      </button>
    </div>
    
    <!-- 社区内容区 -->
    <div class="px-5 py-4 pb-24 scrollbar-hide">
      <!-- 社区分类 -->
      <div class="flex space-x-3 overflow-x-auto pb-2 mb-6 scrollbar-hide">
        <button class="px-4 py-2 bg-primary text-white rounded-full text-sm whitespace-nowrap">
          全部动态
        </button>
        <button class="px-4 py-2 bg-gray-100 text-secondary rounded-full text-sm whitespace-nowrap">
          诗词创作
        </button>
        <button class="px-4 py-2 bg-gray-100 text-secondary rounded-full text-sm whitespace-nowrap">
          学习心得
        </button>
        <button class="px-4 py-2 bg-gray-100 text-secondary rounded-full text-sm whitespace-nowrap">
          文化讨论
        </button>
        <button class="px-4 py-2 bg-gray-100 text-secondary rounded-full text-sm whitespace-nowrap">
          活动分享
        </button>
      </div>
      
      <!-- 社区帖子列表 -->
      <div class="space-y-6">
        <!-- 帖子1 -->
        <div class="bg-white border border-gray-100 rounded-xl overflow-hidden shadow-sm">
          <div class="p-4">
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary font-bold">
                文
              </div>
              <div class="ml-3">
                <h4 class="font-medium">文海拾贝</h4>
                <p class="text-xs text-gray-500">2小时前</p>
              </div>
              <button class="ml-auto text-gray-400">
                <i class="fa fa-ellipsis-h"></i>
              </button>
            </div>
            <div class="mt-3">
              <p class="text-gray-700">
                今日临摹《兰亭集序》，颇有感悟。王羲之的书法"飘若浮云，矫若惊龙"，果然名不虚传。分享我的练习作品，欢迎指点~
              </p>
              <div class="mt-3 grid grid-cols-2 gap-2 rounded-lg overflow-hidden">
                <div class="aspect-square bg-gray-100"></div>
                <div class="aspect-square bg-gray-200"></div>
              </div>
            </div>
            <div class="flex justify-between items-center mt-4 pt-3 border-t border-gray-100">
              <button class="flex items-center text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-heart-o mr-1"></i>
                <span class="text-sm">42</span>
              </button>
              <button class="flex items-center text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-comment-o mr-1"></i>
                <span class="text-sm">8</span>
              </button>
              <button class="flex items-center text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-share mr-1"></i>
                <span class="text-sm">分享</span>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 帖子2 -->
        <div class="bg-white border border-gray-100 rounded-xl overflow-hidden shadow-sm">
          <div class="p-4">
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center text-accent font-bold">
                诗
              </div>
              <div class="ml-3">
                <h4 class="font-medium">诗意生活</h4>
                <p class="text-xs text-gray-500">昨天 18:30</p>
              </div>
              <button class="ml-auto text-gray-400">
                <i class="fa fa-ellipsis-h"></i>
              </button>
            </div>
            <div class="mt-3">
              <p class="text-gray-700">
                雨后初晴，偶得小诗一首：<br>
                雨歇青山净，风来草木香。<br>
                浮云随远岫，归鸟入斜阳。<br>
                请各位诗友雅正~
              </p>
            </div>
            <div class="flex justify-between items-center mt-4 pt-3 border-t border-gray-100">
              <button class="flex items-center text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-heart-o mr-1"></i>
                <span class="text-sm">76</span>
              </button>
              <button class="flex items-center text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-comment-o mr-1"></i>
                <span class="text-sm">23</span>
              </button>
              <button class="flex items-center text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-share mr-1"></i>
                <span class="text-sm">分享</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="border-t border-gray-100 bg-white px-2 py-3 bottom-nav">
      <div class="flex justify-around">
        <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="home-page">
          <i class="fa fa-compass text-xl"></i>
          <span class="text-xs mt-1">探索</span>
        </button>
        <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="explore-page">
          <i class="fa fa-lightbulb-o text-xl"></i>
          <span class="text-xs mt-1">灵感</span>
        </button>
        <button id="plus-button-4" class="w-14 h-14 -mt-8 bg-primary rounded-full flex items-center justify-center text-white shadow-lg transition-transform duration-300">
          <i class="fa fa-plus text-xl"></i>
        </button>
        <button class="flex flex-col items-center text-primary page-nav" data-target="community-page">
          <i class="fa fa-users text-xl"></i>
          <span class="text-xs mt-1">社区</span>
        </button>
        <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="personal-center">
          <i class="fa fa-user text-xl"></i>
          <span class="text-xs mt-1">我的</span>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 7. AI诗词生成页面 -->
  <div id="ai-poetry-page" class="page">
    <!-- 小程序状态栏 -->
    <div class="bg-dark text-white px-4 py-2 flex justify-between items-center text-xs">
      <span>10:50</span>
      <div class="flex space-x-2">
        <i class="fa fa-signal"></i>
        <i class="fa fa-wifi"></i>
        <i class="fa fa-battery-full"></i>
      </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="bg-white px-5 py-4 flex justify-between items-center border-b border-gray-100">
      <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center page-nav" data-target="explore-page">
        <i class="fa fa-arrow-left text-secondary"></i>
      </button>
      <h2 class="font-medium text-lg">AI诗词生成</h2>
      <div class="w-10 h-10"></div>
    </div>
    
    <!-- 生成设置区 -->
    <div class="px-5 py-4">
      <div class="bg-white border border-gray-100 rounded-xl p-5 shadow-sm mb-6">
        <h3 class="font-medium mb-4">生成参数</h3>
        
        <!-- 主题输入 -->
        <div class="mb-4">
          <label class="text-sm text-gray-500 block mb-2">诗词主题</label>
          <input type="text" placeholder="例如：春日、思乡、友情..." class="w-full py-3 px-4 bg-gray-50 rounded-lg border border-gray-100 focus:outline-none focus:border-primary transition-all">
        </div>
        
        <!-- 风格选择 -->
        <div class="mb-4">
          <label class="text-sm text-gray-500 block mb-2">诗词风格</label>
          <div class="grid grid-cols-3 gap-2">
            <button class="py-2 border border-primary bg-primary/10 text-primary rounded-lg text-sm">豪放</button>
            <button class="py-2 border border-gray-100 bg-gray-50 text-secondary rounded-lg text-sm">婉约</button>
            <button class="py-2 border border-gray-100 bg-gray-50 text-secondary rounded-lg text-sm">田园</button>
            <button class="py-2 border border-gray-100 bg-gray-50 text-secondary rounded-lg text-sm">边塞</button>
            <button class="py-2 border border-gray-100 bg-gray-50 text-secondary rounded-lg text-sm">山水</button>
            <button class="py-2 border border-gray-100 bg-gray-50 text-secondary rounded-lg text-sm">怀古</button>
          </div>
        </div>
        
        <!-- 体裁选择 -->
        <div class="mb-4">
          <label class="text-sm text-gray-500 block mb-2">诗词体裁</label>
          <div class="flex space-x-2 overflow-x-auto pb-2 scrollbar-hide">
            <button class="px-4 py-2 border border-primary bg-primary/10 text-primary rounded-full text-sm whitespace-nowrap">
              五言绝句
            </button>
            <button class="px-4 py-2 border border-gray-100 bg-gray-50 text-secondary rounded-full text-sm whitespace-nowrap">
              七言绝句
            </button>
            <button class="px-4 py-2 border border-gray-100 bg-gray-50 text-secondary rounded-full text-sm whitespace-nowrap">
              五言律诗
            </button>
            <button class="px-4 py-2 border border-gray-100 bg-gray-50 text-secondary rounded-full text-sm whitespace-nowrap">
              七言律诗
            </button>
          </div>
        </div>
        
        <!-- 生成按钮 -->
        <button class="w-full bg-primary text-white py-3 rounded-xl font-medium flex items-center justify-center">
          <span>生成诗词</span>
          <i class="fa fa-magic ml-2"></i>
          <span class="ml-2 text-xs bg-white/20 px-2 py-0.5 rounded">消耗30积分</span>
        </button>
      </div>
      
      <!-- 生成结果区 -->
      <div class="bg-white border border-gray-100 rounded-xl overflow-hidden shadow-sm">
        <div class="p-5 border-b border-gray-100">
          <h3 class="font-medium">生成结果</h3>
        </div>
        <div class="p-5 text-center">
          <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-4">
            <i class="fa fa-file-text-o text-2xl"></i>
          </div>
          <p class="text-gray-500 mb-3">还没有生成的诗词</p>
          <p class="text-xs text-gray-400">设置参数并点击生成按钮，AI将为您创作诗词</p>
        </div>
      </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="border-t border-gray-100 bg-white px-2 py-3 bottom-nav">
      <div class="flex justify-around">
        <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="home-page">
          <i class="fa fa-compass text-xl"></i>
          <span class="text-xs mt-1">探索</span>
        </button>
        <button class="flex flex-col items-center text-primary page-nav" data-target="explore-page">
          <i class="fa fa-lightbulb-o text-xl"></i>
          <span class="text-xs mt-1">灵感</span>
        </button>
        <button id="plus-button-5" class="w-14 h-14 -mt-8 bg-primary rounded-full flex items-center justify-center text-white shadow-lg transition-transform duration-300">
          <i class="fa fa-plus text-xl"></i>
        </button>
        <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="community-page">
          <i class="fa fa-users text-xl"></i>
          <span class="text-xs mt-1">社区</span>
        </button>
        <button class="flex flex-col items-center text-secondary/60 page-nav" data-target="personal-center">
          <i class="fa fa-user text-xl"></i>
          <span class="text-xs mt-1">我的</span>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 加号菜单覆盖层 -->
  <div class="plus-menu-overlay" id="plus-menu-overlay"></div>
  
  <!-- 加号菜单 -->
  <div class="plus-menu" id="plus-menu">
    <button class="menu-item bg-accent page-nav" data-target="ai-poetry-page">
      <i class="fa fa-magic text-xl"></i>
      <span>AI创作</span>
    </button>
    <button class="menu-item bg-secondary page-nav" data-target="ar-page">
      <i class="fa fa-cube text-xl"></i>
      <span>AR体验</span>
    </button>
    <button class="menu-item bg-primary">
      <i class="fa fa-pencil text-xl"></i>
      <span>发布</span>
    </button>
    <button class="menu-item bg-dark">
      <i class="fa fa-gamepad text-xl"></i>
      <span>小游戏</span>
    </button>
  </div>
  
  <!-- 页面交互脚本 -->
  <script>
    // 页面导航功能
    document.querySelectorAll('.page-nav').forEach(button => {
      button.addEventListener('click', function() {
        const target = this.getAttribute('data-target');
        document.querySelectorAll('.page').forEach(page => {
          page.classList.remove('active');
        });
        document.getElementById(target).classList.add('active');
        
        // 关闭加号菜单（如果打开）
        closePlusMenu();
      });
    });
    
    // 加号菜单功能
    const plusButtons = document.querySelectorAll('[id^="plus-button"]');
    const plusMenu = document.getElementById('plus-menu');
    const plusMenuOverlay = document.getElementById('plus-menu-overlay');
    
    plusButtons.forEach(button => {
      button.addEventListener('click', togglePlusMenu);
    });
    
    plusMenuOverlay.addEventListener('click', closePlusMenu);
    
    function togglePlusMenu() {
      plusMenu.classList.toggle('active');
      plusMenuOverlay.classList.toggle('active');
      document.querySelectorAll('[id^="plus-button"]').forEach(btn => {
        btn.classList.toggle('animate-spin');
      });
    }
    
    function closePlusMenu() {
      plusMenu.classList.remove('active');
      plusMenuOverlay.classList.remove('active');
      document.querySelectorAll('[id^="plus-button"]').forEach(btn => {
        btn.classList.remove('animate-spin');
      });
    }
    
    // 初始化页面动画
    document.addEventListener('DOMContentLoaded', function() {
      // 为所有页面添加淡入动画
      document.querySelectorAll('.page').forEach(page => {
        if (page.classList.contains('active')) {
          page.style.animation = 'fadeIn 0.3s ease-out forwards';
        }
      });
    });
  </script>
</body>
</html>